<template>
  <div>
    <h1> {{ message }}</h1>
    <p v-show="false"> 使用文本插值: {{ rawHtml }}  </p>
    <p v-show="true"> 使用v-html指令: <span v-html="rawHtml"></span></p>
    <a :href="url" target="_blank">跳转学校官网</a>
    <button v-on:click="hello()"> 按钮 </button>
    <button @click="increase()">计数器+1按钮</button>
    <button @click="decrease()">计数器-1按钮</button>
    <h1>{{ number }}</h1>
    <p>
        JS表达式：电影《{{ movieA.name }}》是：
        {{ 
        movieA.shouzhong == '很广' && movieA.juqing == "有趣" 
        && movieA.texiao == '绚丽' ? '成功的' : '一般的'
        }}
    </p>
    <p>
        计算属性：电影《{{ movieA.name }}》是：
        {{ movieEva }}
    </p>
    <p>
        使用方法：电影《{{ movieA.name }}》是：
        {{ movieEvaFun() }}
    </p>
    <p> {{  movieA.piaofang }}</p>
    <button @click="adjustMovie()"> 调整 </button>
    <p>语文：<input type="number" v-model="yuwen" /></p>
    <p>数学：<input type="number" v-model="shuxue" /></p>
    <p>英语：<input type="number" v-model="yingyu" /></p>
    <p>总分：{{ totalComputed }}</p>
    <p>平均分：{{ averageComputed }}</p>
    <!-- 条件渲染v-if -->
    <div>
      <input v-model="score" type="number"/>
      <p v-if="score >= 85"> 优秀 </p>
      <p v-else-if="score >= 70"> 良好 </p>
      <p v-else-if="score >= 60"> 及格 </p>
      <p v-else>不及格</p>
    </div>
    <!-- 条件渲染 v-show -->
    <div>
      <p v-show="score >= 85"> 优秀 </p>
      <p v-show="score >= 70 && score < 85"> 良好 </p>
      <p v-show="score >= 60 && score < 70"> 及格 </p>
      <p v-show="score < 60">不及格</p>
    </div>
    <!-- 循环渲染v-for -->
     <div>
      <p v-for="building in buildings">{{ building }}</p>
     </div>
     <div>
      <p v-for="studentInfo, index in studentInfos" :key="studentInfo.id">
          {{ index+1 }} {{ studentInfo.name }} 住在 {{ studentInfo.live }}
      </p>
     </div>
     <div>
      <p v-for="(value, key, index) in movieA">
          {{ index+1 }}. KEY是{{ key }}, VALUE是{{ value }}
      </p>
     </div>
     <!-- 练习题 -->
      <div>
          <table border="1">
              <thead>
                  <tr>
                      <th v-for="column,key in studentInfoKeys" :key="key">
                          {{ column }} ({{ key }})
                      </th>
                  </tr>
              </thead>
              <tbody>
                  <tr v-for="studentInfo in studentInfos">
                      <td v-for="column, key, index in studentInfoKeys" :key="studentInfo.id">
                          <span v-if="column == '成绩'">
                              <span v-show="studentInfo[key] >= 60">
                                  及格
                              </span>
                              <span v-show="studentInfo[key] < 60">
                                  挂科
                              </span>
                          </span>
                          <span v-else>
                              {{ studentInfo[key] }}
                          </span>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

console.log('setup')

const score = ref(0)
const buildings = reactive([
  '一善书院', '双馨书院', '三创书院', '四实书院', '八方书院', '拾德书院'
])
const studentInfoKeys = reactive({
  id: '学号',
  name: '姓名',
  live: '书院',
  score: '成绩'
})
const studentInfos = reactive([
  { id: 2005001, name: '蔡徐坤', live: '一善书院', score: 90 },
  { id: 2005002, name: '汪峰', live: '双馨书院', score: 85 },
  { id: 2005003, name: '刘德华', live: '三创书院', score: 61 },
  { id: 2005004, name: '周树', live: '四实书院', score: 59 },
  { id: 2005005, name: '郑强', live: '八方书院', score: 60 },
  { id: 2005006, name: '何炅', live: '拾德书院', score: 30 }
])
const message = ref('hello world')
const rawHtml = ref('<span style="color: red">红色字体</span>')
const url = ref('http://qvtu.edu.cn')
const yuwen = ref(100)
const shuxue = ref(100)
const yingyu = ref(100)
const number = ref(0)
const myclass = {
school: 'qvtu',
name: '22softwaredev1'
}
const myclassReactive = reactive(myclass)
const movieA = reactive({
  name: '哪吒之魔童闹海',
  shouzhong: '很广',
  juqing: '有趣',
  piaofang: 100,
  texiao: '绚丽'
})

// onBeforeMount(() => {
//     console.log('挂载之前')
//     console.log(document.querySelector('#app').innerHTML)
// })

onMounted(() => {
  // console.log('挂载完成之后')
  // console.log(document.querySelector('#app').innerHTML)
  // console.log(movieEva)
  // console.log(movieEva.value)
  // console.log(myclass)
  // console.log(myclassReactive)
  // console.log(myclass == myclassReactive)  // false
  // console.log(url)
  // console.log(url.value)
})

// onBeforeUpdate(() => {
//     console.log('更新之前')
//     console.log(document.querySelector('#app').innerHTML)
// })

// onUpdated(() => {
//     console.log('更新之后')
//     console.log(document.querySelector('#app').innerHTML)
// })

// onBeforeUnmount(() => {
//     console.log('卸载之前（销毁之前）')
//     console.log(document.querySelector('#app').innerHTML)
// })

// onUnmounted(() => {
//     console.log('卸载完成（销毁完成）')
//     console.log(document.querySelector('#app').innerHTML)
// })

function movieEvaFun() {
  console.log('===方法===被调用')
  return movieA.shouzhong == '很广' && movieA.juqing == "有趣" 
      && movieA.texiao == '绚丽' ? '成功的' : '一般的'
}

function hello() {
// console.log('hello world!')
console.log(message.value)
message.value = '帅哥美女们 你们好'
url.value = 'http://www.baidu.com'
}

function increase() {
number.value++
}

function decrease() {
number.value--
}

function adjustMovie() {
  movieA.piaofang = 200
  movieA.shouzhong = '大朋友'
}

const totalComputed = computed(() => {
  return yuwen.value + shuxue.value + yingyu.value
})

const averageComputed = computed(() => {
  return (yuwen.value + shuxue.value + yingyu.value) / 3
})

const movieEva = computed(() => {
  console.log('===computed===被调用')
  return movieA.shouzhong == '很广' && movieA.juqing == "有趣" 
      && movieA.texiao == '绚丽' ? '成功的' : '一般的'
})
</script>

<style scoped>

</style>